<template>
  <div>
    <h3>会员列表</h3>
    <div>
      名称:<input type="text" v-model="info.name" /> 手机号:<input
        type="text"
        v-model="info.phone"
      />
      余额:<input type="text" v-model="info.min" />-<input
        type="text"
        v-model="info.max"
      />
      生日:<input type="date" v-model="info.date1" />
      -
      <input type="date" v-model="info.date2" />
      <input
        type="button"
        value="查询"
        class="btn btn-primary"
        @click="getList"
      />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>Id</td>
          <td>名称</td>
          <td>手机号</td>
          <td>积分</td>
          <td>余额</td>
          <td>生日</td>
          <td>身份证号码</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list" :key="item.Id">
          <td>{{ item.Id }}</td>
          <td>{{ item.Name }}</td>
          <td>{{ item.Phone }}</td>
          <td>{{ item.Score }}</td>
          <td style="color: red">{{ item.Money.toFixed(2) }}</td>
          <td>{{ moment(item.BirthDay).format('YYYY-MM-DD HH:mm:ss') }}</td>
          <td>{{ item.Card }}</td>
          <td>
            <input
              type="button"
              value="详情"
              class="btn btn-info"
              @click="detail(item.Id)"
            />
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="update(item.Id)"
            />
            <input
              type="button"
              value="删除"
              class="btn btn-danger"
              @click="del(item.Id)"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter } from 'vue-router';
const router = useRouter();

//显示列表时向后端传递的参数
let info: any = reactive({
  name: '',
  phone: '',
  min: '',
  max: '',
  date1: '',
  date2: '',
});

//接受后端传递过来的参数
let list: any = ref([]);

onMounted(() => {
  getList();
});

//1.详情跳转并且传递参数
const detail = (id: any) => {
  router.push({
    path: '/memberDetail',
    query: {
      id: id,
    },
  });
};

//1.修改跳转并且传递参数
const update = (id: any) => {
  router.push({
    path: '/memberUpdate', //造一条路径
    query: {
      id: id,
    },
  });
};

//删除
const del = (id: any) => {
  //1.友好提示
  let f = confirm('请问确定要删除吗？');
  //2.发送网络请求进行删除
  if (f) {
    axios({
      url: '/api/Members/DelMemberModel',
      method: 'delete',
      params: {
        id: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          //3.刷新页面
          getList();
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//显示列表
const getList = () => {
  axios({
    url: '/api/Members/GetMemberList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      list.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
